<template>
  <div class="relative min-h-screen">
    <!-- 动态背景 -->
    <div class="particles-background"></div>
    
    <!-- 主内容区 -->
    <div class="relative z-10">
      <!-- 欢迎区域 -->
      <div class="welcome-section text-center py-20 px-4 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-blue-500/10 to-green-400/10"></div>
        <h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-500 mb-6 animate-title">
          HyperBoost
        </h1>
        <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed mb-8 animate-fadeIn">
          打破信息差，助力大学生实现自律
        </p>
        <div class="flex justify-center gap-4 animate-fadeIn">
          <el-button type="primary" size="large" class="hover-scale bg-gradient-to-r from-blue-500 to-green-400 border-none">
            开始探索
          </el-button>
          <el-button size="large" class="hover-scale">
            了解更多
          </el-button>
        </div>
      </div>

      <!-- 主轮播图区域 -->
      <div class="py-12 bg-gradient-to-b from-white to-gray-50">
        <div class="container mx-auto px-4">
          <el-carousel 
            height="600px" 
            :interval="5000"
            type="card"
            :autoplay="true">
            <el-carousel-item v-for="item in carouselItems" :key="item.id"
              class="carousel-card">
              <div class="relative h-full w-full overflow-hidden rounded-2xl shadow-2xl">
                <img :src="item.image" :alt="item.title" 
                  class="w-full h-full object-cover transform hover:scale-110 transition-all duration-700" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
                  <div class="absolute bottom-0 left-0 right-0 p-12 text-left">
                    <h3 class="text-4xl font-bold text-white mb-4 animate-slideUp">{{ item.title }}</h3>
                    <p class="text-xl text-white/90 mb-8 animate-slideUp delay-100">{{ item.description }}</p>
                    <el-button 
                      type="primary" 
                      size="large"
                      class="hover-scale bg-gradient-to-r from-blue-500 to-green-400 border-none animate-slideUp delay-200">
                      立即体验
                    </el-button>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 数据统计区 -->
      <div class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div class="text-center" v-for="stat in statistics" :key="stat.label">
              <div class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-500 mb-2">
                {{ stat.value }}{{ stat.unit }}
              </div>
              <div class="text-gray-600">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 机会轮播区 -->
      <div class="py-16 bg-gradient-to-b from-gray-50 to-white">
        <div class="container mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12">
            <span class="bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
              热门机会
            </span>
          </h2>
          <el-carousel 
            :interval="4000"
            type="card"
            height="400px">
            <el-carousel-item v-for="item in opportunities" :key="item.id"
              class="opportunity-card">
              <div class="bg-white rounded-xl shadow-xl p-8 h-full">
                <div class="flex items-start justify-between mb-6">
                  <div>
                    <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
                    <p class="text-gray-600">{{ item.company }}</p>
                  </div>
                  <el-tag :type="item.type" effect="light">{{ item.category }}</el-tag>
                </div>
                <p class="text-gray-700 mb-6">{{ item.description }}</p>
                <div class="flex justify-between items-center">
                  <span class="text-gray-500">截止日期：{{ item.deadline }}</span>
                  <el-button type="primary" text>查看详情</el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- AI助手展示区 -->
      <div class="py-16 bg-gradient-to-r from-blue-50 to-green-50 relative overflow-hidden">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div class="space-y-6 animate-slideRight">
              <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
                AI智能助手
              </h2>
              <p class="text-xl text-gray-700 leading-relaxed">
                基于最新GPT-4技术，为你提供24小时学习咨询、职业规划、考研指导等全方位服务。
              </p>
              <ul class="space-y-4">
                <li v-for="feature in aiFeatures" :key="feature.id" class="flex items-center space-x-3">
                  <el-icon class="text-green-500" :size="24"><Check /></el-icon>
                  <span class="text-gray-700">{{ feature.text }}</span>
                </li>
              </ul>
              <el-button type="primary" size="large" class="hover-scale bg-gradient-to-r from-blue-500 to-green-400 border-none">
                立即体验
              </el-button>
            </div>
            <div class="relative animate-float">
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-green-400/20 blur-3xl"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="AI助手" class="relative z-10 rounded-2xl shadow-2xl" />
            </div>
          </div>
        </div>
        <!-- 科技感装饰元素 -->
        <div class="absolute top-0 right-0 w-1/3 h-full opacity-10">
          <div class="circuit-pattern"></div>
        </div>
      </div>

      <!-- 用户评价区 -->
      <div class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12">
            <span class="bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
              用户心声
            </span>
          </h2>
          <el-carousel :interval="6000" type="card" height="300px">
            <el-carousel-item v-for="review in userReviews" :key="review.id"
              class="review-card">
              <div class="bg-white rounded-xl shadow-lg p-8 h-full flex flex-col">
                <div class="flex items-center mb-6">
                  <img :src="review.avatar" :alt="review.name" class="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 class="font-bold">{{ review.name }}</h4>
                    <p class="text-gray-600">{{ review.title }}</p>
                  </div>
                </div>
                <p class="text-gray-700 flex-grow">{{ review.content }}</p>
                <div class="flex items-center mt-4">
                  <el-rate v-model="review.rating" disabled show-score />
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 底部CTA区域 -->
      <div class="py-20 bg-gradient-to-r from-blue-500 to-green-400 text-white text-center">
        <div class="container mx-auto px-4">
          <h2 class="text-4xl font-bold mb-6">准备好开始你的提升之旅了吗？</h2>
          <p class="text-xl mb-8 text-white/90">加入我们，发现更多可能</p>
          <el-button size="large" class="hover-scale bg-white text-blue-600">
            立即注册
          </el-button>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 class="text-xl font-bold mb-4">HyperBoost</h3>
              <p class="text-gray-400">打破信息差，助力大学生实现自律</p>
            </div>
            <div>
              <h4 class="text-lg font-bold mb-4">快速链接</h4>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-400 hover:text-white">首页</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">机会</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">分享</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">AI助手</a></li>
              </ul>
            </div>
            <div>
              <h4 class="text-lg font-bold mb-4">联系我们</h4>
              <ul class="space-y-2">
                <li class="text-gray-400">邮箱：contact@hyperboost.com</li>
                <li class="text-gray-400">微信：HyperBoost666</li>
              </ul>
            </div>
            <div>
              <h4 class="text-lg font-bold mb-4">关注我们</h4>
              <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                  <el-icon :size="24"><Platform /></el-icon>
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                  <el-icon :size="24"><Share /></el-icon>
                </a>
              </div>
            </div>
          </div>
          <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
            <p>© 2024 HyperBoost. All rights reserved.</p>
            <p class="mt-2">浙ICP备xxxxxxxx号-1</p>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Calendar, Trophy, Share, Check, Platform } from '@element-plus/icons-vue'

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    title: '智能学习助手',
    description: '基于AI技术，为你定制个性化学习计划',
    image: 'https://picsum.photos/800/500?random=1'
  },
  {
    id: 2,
    title: '发现优质机会',
    description: '汇聚实习、竞赛、考研等多维度发展机会',
    image: 'https://picsum.photos/800/500?random=2'
  },
  {
    id: 3,
    title: '经验分享社区',
    description: '连接优秀同学，分享成长经验',
    image: 'https://picsum.photos/800/500?random=3'
  }
])

// 数据统计
const statistics = ref([
  { label: '注册用户', value: '50', unit: 'K+' },
  { label: '累计机会', value: '1000', unit: '+' },
  { label: '成功案例', value: '500', unit: '+' },
  { label: '活跃社区', value: '100', unit: 'K+' }
])

// 热门机会
const opportunities = ref([
  {
    id: 1,
    title: '字节跳动前端开发实习生',
    company: '字节跳动',
    category: '实习',
    type: 'primary',
    description: '参与抖音电商核心业务开发，享受导师1v1指导',
    deadline: '2024-04-30'
  },
  {
    id: 2,
    title: '2024互联网+大赛校内选拔',
    company: '教务处',
    category: '竞赛',
    type: 'success',
    description: '年度最具含金量的创新创业赛事，丰厚奖金等你来',
    deadline: '2024-05-15'
  },
  {
    id: 3,
    title: '考研经验分享会',
    company: '研究生院',
    category: '考研',
    type: 'warning',
    description: '邀请多位考研成功学长学姐分享备考经验',
    deadline: '2024-03-20'
  }
])

// AI功能特点
const aiFeatures = ref([
  { id: 1, text: '24小时智能问答服务' },
  { id: 2, text: '个性化学习计划制定' },
  { id: 3, text: '基于GPT-4的智能分析' },
  { id: 4, text: '多场景学习助手' }
])

// 用户评价
const userReviews = ref([
  {
    id: 1,
    name: '张同学',
    title: '计算机科学 大三',
    avatar: 'https://picsum.photos/64/64?random=1',
    content: '通过平台找到了理想的实习机会，AI助手的指导让我的准备更有针对性。',
    rating: 5
  },
  {
    id: 2,
    name: '李同学',
    title: '金融学 研一',
    avatar: 'https://picsum.photos/64/64?random=2',
    content: '考研期间使用平台的学习规划功能，帮助我合理分配时间，最终成功上岸。',
    rating: 5
  },
  {
    id: 3,
    name: '王同学',
    title: '机械工程 大四',
    avatar: 'https://picsum.photos/64/64?random=3',
    content: '在这里结识了很多优秀的同学，互相学习交流，共同进步。',
    rating: 4.5
  }
])
</script>

<style scoped>
/* 动态背景 */
.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.1) 0%, transparent 50%);
  animation: backgroundFloat 20s ease-in-out infinite;
  z-index: 0;
}

.particles-background::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at center, #ffffff 2px, transparent 2px);
  background-size: 50px 50px;
  opacity: 0.5;
  animation: particlesMove 150s linear infinite;
}

@keyframes backgroundFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.02); }
}

@keyframes particlesMove {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}

/* 科技感纹理 */
.circuit-pattern {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px),
                    linear-gradient(rgba(52, 211, 153, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  transform: skewY(-15deg);
}

/* 动画效果 */
.animate-title {
  animation: titleFloat 3s ease-in-out infinite;
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.8s ease-out;
}

.animate-slideRight {
  animation: slideRight 0.8s ease-out;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* 交互效果 */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* 卡片样式 */
.carousel-card,
.opportunity-card,
.review-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s ease;
}

.carousel-card:hover,
.opportunity-card:hover,
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
</style> 